{extend name="layouts/base"}
{block name="header"}
<link rel="stylesheet" href="__STATIC__/pc/css/base.css">
<script src="__STATIC__/pc/js/html5.js"></script>
<script>
    window.addressId = '111.198.246.50';
</script>
<script src="__STATIC__/pc/js/jquery.js"></script>
<script src="__STATIC__/pc/js/common.js"></script>
<link rel="stylesheet" href="__STATIC__/pc/css/product.css">
<link rel="stylesheet" href="__STATIC__/pc/css/page.css" />
<style>
    .typeLabel .val {
        width: 100%;
        height: 100%;
        padding: 8px 25px 8px 10px;
        box-sizing: border-box;
        font-size: 14px;
    }

    .typeLabel .select-box {
        padding: 0;
    }
</style>
{/block}

{block name="main"}
<!--头图-->

<div class="topBanner"
     style="background:url({$banner['image']}) no-repeat center">
    <div class="bannerContent w">
        <h1>{$banner['big_title']}</h1>
        <span class="bannerSpan">{$banner['small_title']}</span>
    </div>
</div>

<div class="wrap w">
    <!-- 服务介绍 -->
    <div class="advantage">
        <ul>
            <li class="advLi">
                <div class="icon">
                    <img src="http://p3gu7x1ji.bkt.clouddn.com/%E7%B2%BE%E8%8B%B1%E4%B8%80%E5%AF%B9%E4%B8%80.png" alt="精英一对一服务">
                </div>
                <div class="text">
                    <h4>精英一对一服务</h4>
                    <span>专业精英为您答疑解惑</span>
                </div>
            </li>
            <li class="advLi">
                <div class="icon">
                    <img src="http://p3gu7x1ji.bkt.clouddn.com/%E6%94%B6%E8%B4%B9.png" alt="收费公平透明">
                </div>
                <div class="text">
                    <h4>收费公平透明</h4>
                    <span>个人隐私保护，服务价格透明</span>
                </div>
            </li>
            <li class="advLi">
                <div class="icon">
                    <img src="http://p3gu7x1ji.bkt.clouddn.com/%E5%94%AE%E5%90%8E%E6%9C%8D%E5%8A%A1%E4%BF%9D%E9%9A%9C.png" alt="售后服务保障">
                </div>
                <div class="text">
                    <h4>售后服务保障</h4>
                    <span>客户经理全程跟踪售后进度</span>
                </div>
            </li>
            <li class="advLi">
                <div class="icon">
                    <img src="http://p3gu7x1ji.bkt.clouddn.com/%E6%94%B6%E8%B4%B9.png" alt="售后服务保障">
                </div>
                <div class="text">
                    <h4>售后服务保障</h4>
                    <span>客户经理全程跟踪售后进度</span>
                </div>
            </li>
        </ul>
    </div>
    <!-- 内容 -->
    <div class="prouctContent tier" id="section1" data-sign="1">
        <!-- 内容头部导航 -->
        <div class="contentHead">
            <ul>
                <li class="navCur t-t t-color" data-index="1">
                    <a href="javascript:void(0);" title="服务介绍">服务介绍</a>
                </li>
                <li data-index="2" class="t-t t-color">
                    <a href="javascript:void(0);" title="服务优势">服务优势</a>
                </li>
                <!--<li data-index="5" class="t-t t-color">-->
                    <!--<a href="javascript:void(0);" title="售后服务">售后服务</a>-->
                <!--</li>-->
                <div class="tel">
                    <div class="telIcon">
                        <img src="__STATIC__/pc/picture/serviceicon.png" alt="客服热线" class="commonImg">
                    </div>
                    <span>
                        客服热线：
400-060-1567                    </span>
                </div>
            </ul>

        </div>
        <!-- 服务介绍 -->


        <link rel="stylesheet" href="__STATIC__/pc/css/companyregistry.css" />
        <div>
            <img style="max-width:100%;" src="{$pro['service']}" /><br />
        </div>
        <div class="registryDes">
            <!-- 服务流程 -->
            <div class="serviceCourse">
                <h2 class="courseTitle">
                    服务流程
                </h2>
                <div class="underline">
                </div>
                <ul>
                    <?php
                        $num = count($step);
                        foreach ($step as $k => $v) {
                    ?>
                        <li>
                            <div class="courseItem">
                                <img src="{$v['icon']}" alt="" /> <span> <i>{:str_pad($v['sort'],2,"0",STR_PAD_LEFT)}/</i>{$v['title']}</span>
                            </div>
                            <?php
                                if ($num !== ($k+1)) {
                            ?>
                                <div class="arrows">
                                    <img src="__STATIC__/pc/picture/coursearrows.png" alt="箭头" />
                                </div>
                            <?php
                                }
                            ?>
                        </li>
                    <?php
                        }
                    ?>
                </ul>
            </div>
            <?php
                //步骤
                $qu1 = json_decode($q1['content'],true);
                $qu2 = json_decode($q2['content'],true);
            ?>
            <!-- 您要准备的资料 -->
            <div class="prepareMaterials">
                <h2 class="contentCommonTitle">
                    {$q1['title']}
                </h2>
                <div class="contentCommonUnderline">
                </div>
                <div class="materialsImg">
                    <img class="commonImg" src="{$q1['image']}" alt="" />
                </div>
                <div class="materialsTxt" style="width:435px;">
                    <ul>
                        <?php
                            foreach ($qu1 as $k => $v) {
                        ?>
                            <li>
                            <i>{$k+1}</i> <span>{$v}</span>
                        </li>

                        <?php
                            }
                        ?>
                    </ul>
                </div>
            </div>
            <!-- 您能获得的材料 -->
            <div class="prepareMaterials">
                <h2 class="contentCommonTitle">
                    {$q2['title']}
                </h2>
                <div class="contentCommonUnderline">
                </div>
                <div class="materialsImg getMaterials">
                    <img class="commonImg" src="{$q2['image']}" alt="" />
                </div>
                <div class="materialsTxt">
                    <ul>
                        <?php
                            foreach ($qu2 as $k => $v) {
                        ?>
                        <li>
                            <i>{$k+1}</i> <span>{$v}</span>
                        </li>

                        <?php
                            }
                        ?>
                    </ul>
                </div>
            </div>
            <!-- 公司成立后还需要做什么 -->
            <div class="whatToDo">
                <h2 class="contentCommonTitle">
                    公司成立后还需要做什么
                </h2>
                <div class="contentCommonUnderline">
                </div>
                <div class="whatContent">
                    <?php
                        $need_one = $need[0];
                        unset($need[0]);
                    ?>
                    <div class="left">
                        <a href="{$need_one['link']}"> <img class="commonImg" src="{$need_one['image']}" alt="" />
                            <div class="leftTxt">
                                <h2>
                                    {$need_one['title']}
                                </h2>
                                <span>{$need_one['intro']}</span>
                            </div>
                        </a>
                    </div>
                    <div class="right">
                        <ul>
                            <?php
                                foreach ($need as $k => $v) {
                            ?>
                                <li>
                                <a href="{$v['link']}"> <img class="commonImg" src="{$v['image']}" alt="" />
                                    <div class="rightTxt">
                                        <h2>
                                            {$v['title']}
                                        </h2>
                                        <span>{$v['intro']}</span>
                                    </div>
                                </a>
                            </li>

                            <?php
                                }
                            ?>
                    </div>
                </div>
            </div>
        </div>;
        <!-- 服务优势 -->
        <div id="section2" class="serviceAdvantage tier" data-sign="2">
            <div class="advTitle">
                服务优势
            </div>
            <div class="advContent">
                <div class="advTopImg">
                    <img src="http://p3gu7x1ji.bkt.clouddn.com/%E9%98%BF%E9%87%8C%E6%97%BA%E6%97%BA%E5%9B%BE%E7%89%8720180905111157.png" alt="服务优势" />
                </div>
                <ul class="advLeft">
                    <li>
                        资深工商团队为您服务，更放心
                    </li>
                    <li>
                        收费合理价格透明
                    </li>
                    <li>
                        精通办理流程和资料准备,流程可控
                    </li>
                    <li>
                        专门渠道专人办理，服务时间更快捷
                    </li>
                    <li>
                        办理不成功，随时退款
                    </li>
                </ul>
                <ul class="advMiddle">
                    <li>
                        专业
                    </li>
                    <li>
                        省钱
                    </li>
                    <li>
                        流程
                    </li>
                    <li>
                        高效
                    </li>
                    <li>
                        保障
                    </li>
                </ul>
                <ul class="advRight">
                    <li>
                        自己办理无专业人士帮忙，很麻烦
                    </li>
                    <li>
                        隐形消费不划算
                    </li>
                    <li>
                        不熟悉政府办理，流程不可控
                    </li>
                    <li>
                        自己操作，时间漫长
                    </li>
                    <li>
                        办理结果无保障
                    </li>
                </ul>
            </div>
        </div>

        <!-- 售后服务 -->
        <div id="section5" class="afterSales tier" data-sign="5" style="display: none;">
            <div class="redBgTitle">
                售后服务
            </div>
            <div class="afterSalesContent">
                <ul>
                    <li class="promise">
                        <div class="afterDalesIcon">
                            <div class="aSImg">
                                <img class="commonImg" src="__STATIC__/pc/picture/aftersalesicon1.png" alt="公司承诺" />
                            </div>
                            <span>公司承诺</span>
                        </div>
                        <span class="proTxt">及时高效完成您的服务内容，对于售后服务，我们专人第一时间处理反馈，确保及时解决您的问题。</span>
                    </li>
                    <li class="flowPath">
                        <div class="afterDalesIcon">
                            <div class="aSImg">
                                <img class="commonImg" src="__STATIC__/pc/picture/aftersalesicon2.png" alt="处理流程" />
                            </div>
                            <span>处理流程</span>
                        </div>
                        <div class="flowPathImg">
                            <img class="commonImg" src="__STATIC__/pc/picture/aftersalesimg.png" alt="处理流程" />
                        </div>
                    </li>
                    <li class="complaint">
                        <div class="afterDalesIcon">
                            <div class="aSImg">
                                <img class="commonImg" src="__STATIC__/pc/picture/aftersalesicon3.png" alt="投诉方式" />
                            </div>
                            <span>投诉方式</span>
                        </div>
                        <ul>
                            <li>
                                1.拨打400电话:语音沟通
                            </li>
                            <li>
                                2.在线投诉:描述投诉内容，直接对话
                            </li>
                            <li>
                                3.微博、微信投诉：直接发布内容，联系我们
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>

    </div>

    <!-- 其他产品推荐 -->
    <div class="elseRecomm">
        <div class="elseRecommTitle">
            <h1>其他产品推荐</h1>
        </div>
        <ul>
            <?php
                foreach ($tui as $k => $v) {
            ?>
                <li>
                <a href="{$v['link']}" title="{$v['name']}">
                    <div class="recommImg">
                        <img class="commonImg" src="{$v['image']}" alt="代理记账">
                    </div>
                    <span class="recommTxt">{$v['name']}</span>
                </a>
            </li>

            <?php
                }
            ?>
        </ul>
    </div>


</div>

{/block}


{block name="privateJs"}
<script>
    /**/
    window.mark = '5b0d1cc83ba27e32384de0a7';
    /**/
    //导航选中
    $('[mark=' + window.mark + ']').addClass('on');
    $(function () {
        // 悬浮导航
        $(window).scroll(function (event) {
            var scrollH = $(window).scrollTop();// 页面卷去的高度
            var fixationNavH = $('.contentHead').offset().top;//元素距离顶部的高度
            if (scrollH - 5 > fixationNavH) {
                $('.suspendNav').show();

            } else {
                $('.suspendNav').hide();
            }

        });

    })
</script>

<script>
    //左侧导航选中
    var viewFactor = $(window).height() / 2;	//显示视口多少
    $(window).on('scroll', function () {
        var vTop = $(document).scrollTop();
        var $ele = $('[data-sign]')

        $ele.each(function (i, e) {
            var eTop = $(e).offset().top;
            if (vTop + viewFactor >= eTop) {
                $('.suspendNav li').removeClass('suspendNavCur');
                var dataSign = $(this).attr('data-sign');
                $('.suspendNav [data-index="' + dataSign + '"]').addClass('suspendNavCur');
            }
        })
    })

    //点击
    $('.suspendNav li,.contentHead li').on('click', function () {
        var dataIndex = $(this).attr('data-index');
        var targetTop = $('[data-sign="' + dataIndex + '"]').offset().top;
        $('html,body').animate({
            scrollTop: targetTop
        });
    });
</script>
<script>
    $(function () {
        $('.topBanner').css('height', function () {
            var tbH = innerHeight - 290;
            return tbH;
        })
        $('.topBanner').css('min-height', 300);
        $('.topBanner').css('max-height', 480);
    })
    $(window).on('resize', function () {
        $('.topBanner').css('height', function () {
            var tbH = innerHeight - 290;
            return tbH;
        })
        $('.topBanner').css('min-height', 300);
        $('.topBanner').css('max-height', 480);
    });

</script>
{/block}
